<template>
	<view class="cu-w-100 cu-position-fixed" :style="{
			opacity:getOpacity,
			height:height,
			zIndex:zIndex,
			borderRadius:borderRadius,
			backgroundImage: 
				backgroundImageType !== 'image' 
				? 
				linearGradient
				:
				getBgImageUrl
		}">
	</view>
</template>

<script>
	export default {
		name:"page-bg",
		props: {
			opacity: {type: String,default: "0.25"},
			/* 高度 */
			height:{type: String,default: "100vh"},
			/* 图层 */
			zIndex:{type: String,default: "0"},
			 /* 圆角 */
			borderRadius:{type: String,default: undefined},
			/* 背景类型 
			image 	图片 
			非image 渐变色 （默认）*/
			backgroundImageType:{type: String,default: "image"},
			/* 图片base64 */
			backgroundImageUrl: {type: String,default: undefined},
			/* 渐变色 */
			linearGradient: {type: String,default: "linear-gradient(to top,rgba(64, 64, 111,0.65),rgba(64, 64, 111,0.25))"},
		},
		computed:{
			getBgImageUrl(){
				return this.backgroundImageType === "image" && this.backgroundImageUrl === undefined ? this.$store.state.commonStore.bgOptions.url : this.backgroundImageUrl
			},
			getOpacity(){
				return this.opacity === undefined ? this.$store.state.commonStore.bgOptions.getOpacity : this.opacity
			}
		},
		data() {
			return {

			};
		},
		
	}
</script>

<style lang="scss">

</style>